// import * as echarts from '../../components/ec-canvas/echarts';
import uCharts from '../../components/u-charts/u-charts';

var uChartsInstance = null;

// 替换为你的 API 基地址
// const baseUrl = 'http://localhost:8123/ai'; 
const baseUrl = 'http://1.15.22.194:8090/ai';  
// 替换为实际获取 userId 的逻辑
const MOCK_USER_ID = 24; 
// 请求超时时间设置（毫秒）
const REQUEST_TIMEOUT = 30000;

// 格式化日期（辅助函数）
function formatDate(dateString) {
  if (!dateString) return '';
  try {
    const date = new Date(dateString);
    // 简单格式化，可根据需要调整
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  } catch (e) {
    console.error('Error formatting date:', dateString, e);
    return dateString; // 返回原始字符串以防出错
  }
}

// 修改为正确的updateChart函数定义
function updateChart(trendData, type = 'line', canvas, canvasWidth = 750) {
  if (!trendData || !trendData.dates || trendData.dates.length === 0) return;
  
  const ctx = canvas || wx.createCanvasContext('emotionTrendCanvas');
  
  // 根据数据点数量动态调整宽度
  const pointCount = trendData.dates.length;
  const minWidth = Math.max(750, pointCount * 100); // 确保有足够的宽度
  
  // 配置图表选项
  const chartOpts = {
    type: type,
    context: ctx,
    width: canvasWidth || minWidth,
    height: 200,
    categories: trendData.dates || [],
    series: [{
      name: '情绪总分',
      data: trendData.emotionScores || [],
      color: '#6e45e2'
    }],
    padding: [15, 15, 0, 15],
    xAxis: {
      disableGrid: true,
      fontColor: '#666666',
      fontSize: 12
    },
    yAxis: {
      min: 0,
      max: 100,
      fontColor: '#666666',
      fontSize: 12,
      format: (val) => val.toFixed(0)
    }, 
    dataLabel: true,
    dataPointShape: true,
    legend: false,
    extra: {}
  };
  
  // 根据不同图表类型配置额外选项
  switch(type) {
    case 'line':
      chartOpts.extra = {
        line: {
          lineWidth: 3,
          curve: true
        },
        tooltip: {
          showBox: true,
          showArrow: true,
          borderWidth: 1,
          borderRadius: 4,
          borderColor: '#6e45e2',
          bgColor: '#ffffff',
          bgOpacity: 0.9
        }
      };
      break;
    case 'column':
      chartOpts.extra = {
        column: {
          width: 30,
          seriesGap: 5,
          barBorderRadius: [5, 5, 0, 0]
        },
        tooltip: {
          showBox: true,
          showArrow: true,
          borderWidth: 1,
          borderRadius: 4,
          borderColor: '#6e45e2',
          bgColor: '#ffffff',
          bgOpacity: 0.9
        }
      };
      break;
    case 'area':
      chartOpts.extra = {
        area: {
          opacity: 0.3,
          gradient: true
        },
        tooltip: {
          showBox: true,
          showArrow: true,
          borderWidth: 1,
          borderRadius: 4,
          borderColor: '#6e45e2',
          bgColor: '#ffffff',
          bgOpacity: 0.9
        }
      };
      break;
    case 'mix':
      // 混合图表类型（柱状+折线）
      chartOpts.type = 'column';
      chartOpts.series = [
        {
          name: '情绪总分',
          data: trendData.emotionScores || [],
          color: '#6e45e2',
          type: 'column'
        },
        {
          name: '平均值',
          data: Array(trendData.dates.length).fill(
            trendData.emotionScores.reduce((a, b) => a + b, 0) / trendData.emotionScores.length || 0
          ),
          color: '#ff9a47',
          type: 'line',
          disableLegend: false
        }
      ];
      chartOpts.legend = true;
      chartOpts.extra = {
        column: {
          width: 30,
          barBorderRadius: [5, 5, 0, 0]
        },
        line: {
          lineWidth: 2,
          lineDash: [3, 2]
        },
        tooltip: {
          showBox: true,
          showArrow: true,
          borderWidth: 1,
          borderRadius: 4,
          borderColor: '#6e45e2',
          bgColor: '#ffffff',
          bgOpacity: 0.9
        }
      };
      break;
  }
  
  uChartsInstance = new uCharts(chartOpts);
  
  // 绘制图表
  ctx.draw(true);
  
  return uChartsInstance;
}

Page({
  data: {
    inputText: '', // 输入框内容
    aiResponse: '', // AI 回复内容
    primaryEmotion: '', // 主要情绪
    emotionScore: null, // 情绪总分
    suggestions: '', // AI 建议
    historyList: [], // 历史对话列表
    trendData: null, // 情绪趋势数据
    userId: MOCK_USER_ID, // 当前用户 ID
    loadingAnalyze: false, // 分析接口加载状态
    loadingHistory: false, // 历史接口加载状态
    loadingTrend: false, // 趋势接口加载状态
    deletingDialogId: null, // 正在删除的对话 ID
    chartType: 'line', // 当前图表类型：line, column, area, mix
    timeRange: 7, // 时间范围（天数）
    chartWidth: 750 // 图表宽度
  },

  onLoad: function (options) {
    // 获取系统信息，设置图表宽度
    wx.getSystemInfo({
      success: (res) => {
        // 设置图表宽度基于屏幕宽度
        let width = res.windowWidth;
        // 根据屏幕宽度和数据量决定实际图表宽度
        this.setData({
          chartWidth: Math.max(width, width * 1.5) // 至少1.5倍屏幕宽度，保证可以滚动
        });
      }
    });
    
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
    this.fetchInitialData();
  },

  // 获取初始数据：历史和趋势
  fetchInitialData: function() {
    Promise.all([
      this.fetchHistoryData(false),
      this.fetchTrendData(this.data.timeRange, false)
    ]).then(() => {
      wx.hideLoading();
    }).catch(() => {
      wx.hideLoading();
    });
  },

  // 获取历史对话
  fetchHistoryData: function(showLoading = true) {
    if (this.data.loadingHistory) return Promise.reject('Already loading');
    
    if (showLoading) {
      this.setData({ loadingHistory: true });
    }
    
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${baseUrl}/history/${this.data.userId}`,
        method: 'GET',
        timeout: REQUEST_TIMEOUT, // 设置较长的超时时间
        success: (res) => {
          if (res.data && res.data.code === 200 && Array.isArray(res.data.data)) {
            const formattedHistory = res.data.data.map(item => ({
              ...item,
              formattedCreateTime: formatDate(item.createTime)
            })).sort((a, b) => new Date(b.createTime) - new Date(a.createTime)); // 按时间倒序
            this.setData({ historyList: formattedHistory });
            resolve(formattedHistory);
          } else {
            console.error("获取历史记录失败:", res.data);
            if (showLoading) {
              wx.showToast({ title: '获取历史记录失败', icon: 'none' });
            }
            this.setData({ historyList: [] }); // 清空以防显示旧数据
            reject(res.data);
          }
        },
        fail: (err) => {
          console.error("请求历史记录错误:", err);
          if (showLoading) {
            // 根据错误类型显示不同提示
            if (err.errMsg && err.errMsg.includes('timeout')) {
              wx.showToast({ title: '请求超时，请检查网络', icon: 'none' });
            } else {
              wx.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
            }
          }
          this.setData({ historyList: [] });
          reject(err);
        },
        complete: () => {
          if (showLoading) {
            this.setData({ loadingHistory: false });
          }
        }
      });
    });
  },

  // 获取情绪趋势
  fetchTrendData: function(days = 7, showLoading = true) {
    if (this.data.loadingTrend) return Promise.reject('Already loading');
    
    // 更新时间范围
    this.setData({ timeRange: days });
    
    if (showLoading) {
      this.setData({ loadingTrend: true });
    }
    
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${baseUrl}/trend/${this.data.userId}`,
        method: 'GET',
        timeout: REQUEST_TIMEOUT, // 设置较长的超时时间
        data: {
          days: days 
        },
        success: (res) => {
          if (res.data && res.data.code === 200 && res.data.data) {
            const trendData = res.data.data;
            this.setData({ trendData });
            
            // 动态调整图表宽度
            const dataLength = trendData.dates ? trendData.dates.length : 0;
            const minWidth = Math.max(750, dataLength * 100);
            this.setData({ chartWidth: minWidth });
            
            // 使用全局函数更新图表
            updateChart(trendData, this.data.chartType, null, minWidth);
            resolve(trendData);
          } else {
            console.error("获取情绪趋势失败:", res.data);
            if (showLoading) {
              wx.showToast({ title: '获取情绪趋势失败', icon: 'none' });
            }
            this.setData({ trendData: null });
            reject(res.data);
          }
        },
        fail: (err) => {
          console.error("请求情绪趋势错误:", err);
          if (showLoading) {
            wx.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
          }
          this.setData({ trendData: null });
          reject(err);
        },
        complete: () => {
          if (showLoading) {
            this.setData({ loadingTrend: false });
          }
        }
      });
    });
  },
  
  // 刷新趋势按钮点击处理方法
  refreshTrend: function() {
    // 使用当前选择的时间范围刷新数据
    this.fetchTrendData(this.data.timeRange, true);
  },
  
  // 切换图表类型
  switchChartType: function(e) {
    const type = e.currentTarget.dataset.type;
    if (type === this.data.chartType) return;
    
    this.setData({ chartType: type });
    
    if (this.data.trendData) {
      // 设置更大的图表宽度确保可滑动
      const dataLength = this.data.trendData.dates ? this.data.trendData.dates.length : 0;
      const minWidth = Math.max(wx.getSystemInfoSync().windowWidth, dataLength * 100);
      this.setData({ chartWidth: minWidth });
      
      updateChart(this.data.trendData, type, null, minWidth);
    }
  },
  
  // 切换时间范围
  switchTimeRange: function(e) {
    const days = parseInt(e.currentTarget.dataset.days);
    if (days === this.data.timeRange) return;
    
    this.fetchTrendData(days, true);
  },

  // 输入框绑定
  bindInput: function(e) {
    this.setData({
      inputText: e.detail.value
    });
  },

  // 提交对话
  submitDialog: function() {
    if (!this.data.inputText.trim() || this.data.loadingAnalyze) {
      return;
    }
    
    // 记录开始时间
    const startTime = Date.now();
    // 最短显示加载状态的时间（毫秒）
    const MIN_LOADING_TIME = 1500;
    
    this.setData({ 
      loadingAnalyze: true 
    });
    
    // 显示加载提示
    wx.showLoading({
      title: '正在分析中...',
      mask: true
    });
    
    const content = this.data.inputText;

    wx.request({
      url: `${baseUrl}/analyze`,
      method: 'POST',
      data: {
        dialogContents: content,
        userId: this.data.userId
      },
      timeout: REQUEST_TIMEOUT, // 设置较长的超时时间
      success: (res) => {
        if (res.data && res.data.code === 200 && res.data.data) {
          const result = res.data.data;
          
          // 计算已经过的时间
          const elapsedTime = Date.now() - startTime;
          // 计算还需要等待的时间
          const remainingTime = Math.max(0, MIN_LOADING_TIME - elapsedTime);
          
          // 延迟更新UI，确保至少显示MIN_LOADING_TIME的加载状态
          setTimeout(() => {
            // 隐藏加载提示
            wx.hideLoading();
            
            // 更新界面数据
            this.setData({
              aiResponse: result.dialogAsk || '',
              primaryEmotion: result.primaryEmotion || '',
              emotionScore: result.emotionScore !== undefined ? result.emotionScore : null,
              suggestions: result.suggestions || '',
              inputText: '', // 清空输入框
              loadingAnalyze: false
            });
            
            // 滚动到顶部以便查看响应
            wx.pageScrollTo({
              scrollTop: 0,
              duration: 300
            });
            
            // 分析成功后刷新历史和趋势
            this.fetchHistoryData(false);
            this.fetchTrendData(this.data.timeRange, false);
          }, remainingTime);
          
        } else {
          console.error("分析对话失败:", res.data);
          
          // 计算已经过的时间
          const elapsedTime = Date.now() - startTime;
          // 计算还需要等待的时间
          const remainingTime = Math.max(0, MIN_LOADING_TIME - elapsedTime);
          
          // 延迟显示错误提示
          setTimeout(() => {
            wx.hideLoading();
            wx.showToast({ title: '分析失败，请稍后重试', icon: 'none', duration: 2000 });
            this.setData({ loadingAnalyze: false });
          }, remainingTime);
        }
      },
      fail: (err) => {
        console.error("请求分析接口错误:", err);
        
        // 计算已经过的时间
        const elapsedTime = Date.now() - startTime;
        // 计算还需要等待的时间
        const remainingTime = Math.max(0, MIN_LOADING_TIME - elapsedTime);
        
        // 延迟显示错误提示
        setTimeout(() => {
          wx.hideLoading();
          
          // 根据错误类型显示不同提示
          if (err.errMsg && err.errMsg.includes('timeout')) {
            wx.showToast({ 
              title: '请求超时，请检查网络后重试', 
              icon: 'none', 
              duration: 2500 
            });
          } else {
            wx.showToast({ 
              title: '网络错误，请稍后重试', 
              icon: 'none', 
              duration: 2000 
            });
          }
          
          this.setData({ loadingAnalyze: false });
        }, remainingTime);
      },
      complete: () => {
        // 完成回调不再立即取消加载状态，而是在延迟后的回调中处理
      }
    });
  },

  // 删除对话
  deleteDialog: function(e) {
    const dialogId = e.currentTarget.dataset.id;
    if (!dialogId || this.data.deletingDialogId) return; // 防止重复点击

    wx.showModal({
      title: '确认删除',
      content: '确定要删除这条对话记录吗？',
      success: (res) => {
        if (res.confirm) {
          this.setData({ deletingDialogId: dialogId });
          wx.request({
            // 注意 API 图片中使用的是 {dialogId}/{userId}
            url: `${baseUrl}/dialog/${dialogId}/${this.data.userId}`,
            method: 'DELETE',
            timeout: REQUEST_TIMEOUT, // 设置较长的超时时间
            success: (delRes) => {
              if (delRes.data && delRes.data.code === 200 && delRes.data.data === true) {
                wx.showToast({ title: '删除成功', icon: 'success' });
                // 从列表中移除被删除的项
                const newList = this.data.historyList.filter(item => item.id !== dialogId);
                this.setData({ historyList: newList });
                // 删除后可能需要刷新趋势图
                this.fetchTrendData(this.data.timeRange, false);
              } else {
                console.error("删除对话失败:", delRes.data);
                wx.showToast({ title: '删除失败', icon: 'none' });
              }
            },
            fail: (err) => {
              console.error("请求删除接口错误:", err);
              wx.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
            },
            complete: () => {
              this.setData({ deletingDialogId: null });
            }
          });
        }
      }
    });
  },

  // 查看对话详情（可选实现）
  viewDialogDetail: function(e) {
    const dialogId = e.currentTarget.dataset.id;
    wx.showLoading({ title: '加载中...' });
    wx.request({
      url: `${baseUrl}/detail/${dialogId}`,
      method: 'GET',
      timeout: REQUEST_TIMEOUT, // 设置较长的超时时间
      success: (res) => {
        if (res.data && res.data.code === 200 && res.data.data) {
          // 在这里处理详情数据，例如弹窗显示
          wx.showModal({
            title: `对话详情 (ID: ${dialogId})`,
            content: `内容: ${res.data.data.dialogContents}\nAI回复: ${res.data.data.dialogAsk}\n时间: ${formatDate(res.data.data.createTime)}`,
            showCancel: false
          });
        } else {
           wx.showToast({ title: '获取详情失败', icon: 'none' });
        }
      },
      fail: (err) => {
        wx.showToast({ title: '网络错误', icon: 'none' });
      },
      complete: () => {
        wx.hideLoading();
      }
    });
  }
});